<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue中操作数组</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <ul>
        <li v-for="p in persons">
          {{p.name}} ---- {{p.age}}
        </li>
      </ul>
      <button @click="changeJingName">修改晶晶的名字</button>
      <button @click="changeJingAge">修改晶晶的年龄</button>
      <button @click="changeJing">修改晶晶</button>
    </div>

    <script type="text/javascript">
      let vm = new Vue({
        el:'#demo',
        data:{
          a:1,
          b:2,
          c:3,
          persons:[
            {id:'asfdtrafsd01',name:'晶晶',age:18},
            {id:'asfdtrafsd02',name:'强强',age:40},
            {id:'asfdtrafsd03',name:'飞飞',age:30}
          ]
        },
        methods:{
          changeJingName(){
            this.persons[0].name = 'tony'
          },
          changeJingAge(){
            this.persons[0].age = 1
          },
          changeJing(){
            // Vue中不允许直接通过下标去更新数组中的某一项
            // this.persons[0] = {id:'asftrdfaytsd04',name:'蒙娜丽晶',age:900}
            // console.log(this.persons[0])
            
            this.persons.splice(0,1,{id:'asftrdfaytsd04',name:'蒙娜丽晶',age:900})

            // console.log(this.persons.push === Array.prototype.push) //false
            
          }
        }
      })
      console.log(vm)
    </script>
  </body>
</html>